import { Radio, RadioChangeEvent, Upload } from "antd";
import { deleteFileInf } from "@/utils/deleteFileInf";
import { PlusOutlined } from "@ant-design/icons";
import { pageList, useBgList } from "./hooks/useBgList";

export default function Bg() {
const {fileList,uploadFileInf,setFileList,currentKey,setCurrentKey,saveConfigInf}= useBgList()
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </button>
  );
  return (
    <div className="page__wrap--g">
      <div className="form__wrap--g">
        <Radio.Group
          size="middle"
          options={pageList}
          onChange={({ target: { value } }: RadioChangeEvent) => {
            setCurrentKey(value);
          }}
          value={currentKey}
          optionType="button"
          buttonStyle="solid"
        />
      </div>
      <div className="table__wrap--g no-page">
        <Upload
          listType="picture-card"
          className="avatar-uploader"
          action="#"
          fileList={fileList}
          customRequest={(file) => uploadFileInf(file.file)}
          onRemove={(file) => {
            file.url && deleteFileInf(file.url);
            const list = fileList.filter((item) => item.url !== file.url)
            setFileList(list);
            saveConfigInf(list)
          }}
        >
          {uploadButton}
        </Upload>
      </div>
    </div>
  );
}
